<template>
  <div id="organizational">
    <div class="homeTitle admin">
      <span>组织架构管理</span>
      <el-input placeholder="搜索部门" v-model="search" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
      </el-input>
    </div>
    <div class="navQuery">
      <div class="queryCon">
        <div class="qSeles">
          <!-- 两个选择 -->
          <div class="xuanze">
            <div class="xuanzeCon">
              <span>地市：</span>
              <el-select v-model="city" placeholder="请选择" size="small" @change="cityChange">
                <el-option
                v-for="ele in cityOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.id"
              ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>机构\行社：</span>
              <el-select v-model="bank" placeholder="请选择" size="small" @change="bankChange">
                <el-option
                v-for="ele in bankOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.id"
              ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>部门：</span>
              <el-select v-model="bumen" placeholder="请选择" size="small" @change="bumenChange">
               <el-option
                v-for="ele in bumenOption"
                :key="ele.value"
                :label="ele.name"
                :value="ele.id"
              ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>子部门：</span>
              <el-select v-model="keshi" placeholder="请选择" size="small">
                <el-option
                v-for="ele in keshiOption"
                :key="ele.value"
                :label="ele.name"
                :value="ele.id"
              ></el-option>
              </el-select>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btnAb">
            <el-button type="primary" size="small" @click="getdata(1)">查询</el-button>
            <el-button type="primary" size="small" @click="addUser">添加组织架构信息</el-button>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="cities" label="地市" align="center"></el-table-column>
          <el-table-column prop="bank" label="机构\行社" align="center"></el-table-column>
          <el-table-column prop="department" label="部门" align="center"></el-table-column>
          <el-table-column prop="cDepartment" label="子部门" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "organizational",
  data() {
    return {
      search: "",
      // 四级联动
      city: '',
      cityOption: '',
      bank: '',
      bankOption: '',
      bumen: '',
      bumenOption: '',
      keshi: '',
      keshiOption: '',
      // ------四级联动结束------
      tableData: [],
      currentPage: 1,
      total: null,
    };
  },
  mounted () {
    this.getdata(1);
    this.getCity();
  },
  methods: {
    del (row) {
      // console.log(row);
      this.axios.post('organizationalChart/deleteById',{id: row.id})
        .then(({data})=> {
          if(data.code = 200) {
             this.$message({message: '删除成功',type: 'success'});
             this.getdata(this.currentPage);
          }
        })
    },
    getdata (val) {
      this.currentPage = val;
      let obj= {
        name: this.search,
        citiesId: this.city,
        bankId: this.bank,
        departmentId: this.bumen,
        cDepartmentId: this.keshi,
        page: this.currentPage,
        limit: 10
      }
      if (obj.citiesId == -1) delete(obj.citiesId)
      this.axios.get('organizationalChart/findAllByName',{params:this.filterNoneObj(obj)})
        .then(({data}) => {
          if (data.code == 200) {
            this.tableData = data.data;
            this.total = data.pageInfo.total;
          }
        })
    },
    modify () {
      this.$router.push('modify');
    },
    addUser() {
      this.$router.push('addOrganizational');
    },
    // ---------四级联动开始----------------------
    // 地市查询
    getCity() {
      this.axios.get('organizationalChart/findAllCities')
      .then(({data}) => {
          let arr = data.data;
          arr.unshift({name: "全部", id: -1, type: "地市"});
          this.cityOption = arr;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChange() {
    //  let obj = this.cityOption.find((ele)=> {
    //     return ele.name == this.city;
    //   });
      this.bank = '';
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectBank', {params: {id: this.city}})
        .then(({data}) => {
          this.bankOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 机构行社改变
    bankChange() {
      // let obj = this.bankOption.find((ele)=> {
      //   return ele.name == this.bank;
      // });
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectDepartment', {params: {id: this.bank}})
        .then(({data}) => {
          this.bumenOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 所属部门改变
    bumenChange() {
      // let obj = this.bumenOption.find((ele)=> {
      //   return ele.name == this.bumen;
      // });
      this.keshi = '';
      this.axios.get('organizationalChart/selectChildDepartment', {params: {id: this.bumen}})
        .then(({data}) => {
          this.keshiOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // -----------四级联动结束----------------
     // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    }
  },
  watch: {
    // currentPage: {
    //   handler: function (val, oldVal) {
    //     this.$router.replace({path: 'organizational', query:{page: this.currentPage}});
    //   },
    //   immediate: true
    // }
  }
};
</script>

<style lang="scss">
#organizational {
  .homeTitle {
    &.admin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid black;
      .el-input {
        width: 300px;
      }
    }
  }
  .navQuery {
    .queryCon {
      padding: 20px 20px;
      .qSeles {
        .xuanze {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-bottom: 10px;
          .xuanzeCon {
            height: 40px;
            display: flex;
            align-items: center;
            margin-right: 30px;
            .el-input {
              width: 200px;
            }
          }
        }
        .btnAb {
          margin-top: 30px;
          .el-button {
            margin-right: 30px;
          }
        }
      }
    }
    .tablecon {
      padding: 20px;
    }
    .pgfy {
      padding: 20px;
      padding-top: 10px;
      text-align: right;
    }
  }
}
</style>
